<template>
  <el-container class="register-container">
     <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" ">
			  <template #icon>
				<el-icon @click="back"><ArrowLeftBold/></el-icon>
			  </template>
            <template #content>
				<span class="text">返回登录</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <el-card class="form-card">
        <h2>东软环保公众监督平台<br>公共监督员端</h2>
        <el-form :model="register" status-icon :rules="rules" ref="registerForm" :hide-required-asterisk="true">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="register.phoneNumber" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="register.name" placeholder="真实姓名便于我们联系您"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="register.birthday" type="date" placeholder="年 /月/日" value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="register.sex" inline>
              <el-radio value="1" class="male-radio">男</el-radio>
              <el-radio value="0" class="female-radio">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="register.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="register.confirmPassword" type="password" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="register-button" @click="handleRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import axios from '@/utils/axiosUtils';
import { reactive } from 'vue';
import router from '@/router';
let register = reactive({
	phoneNumber:null,
	name:null,
	birthday:null,
	sex:"1",
	password:null,
	confirmPassword:null
})
let validatePassword = (rules, value, callback) => {
	if(value !== register.password) {
		callback(new Error('请确保确认密码与密码一致!'));
	}else{
		callback();
	}
};
let rules=reactive({
	phoneNumber:[{
		required:true,
		trigger:'blur',
		message:'手机号码不能为空'
	}],
	name:[{
		required:true,
		trigger:'blur',
		message:'真实姓名不能为空'
	}],
	birthday:[{
		required:true,
		trigger:'blur',
		message:'请选择出生日期'
	}],
	password:[{
		required:true,
		trigger:'blur',
		message:'密码不能为空'
	},
	{
		pattern: /^(?=.*[a-z])(?=.*[A-Z]).{6,15}$/,
		trigger:'blur',
		message:'密码长度必须在6-15位且必须包含大小写字母'
	}],
	confirmPassword:[{
		required:true,
		trigger:'blur',
		message:'确认密码不能为空'
	},
	{
		validator:validatePassword,
		trigger:'blur'
	}]
})
let back = function(){
	router.push({path:"/"})
}
let handleRegister = function(){
	axios.post("http://localhost:7000/service-neps/supervisor/register",register).then(res=>{
		console.log(res.data)
		if(res.data.status==true){
			ElMessage({
				message:res.data.msg,
				type:"success"
			});
			router.push({path:"/"})
		}else{
			ElMessage({
				message:res.data.msg,
				type:"error"
			});
		}
	})
}
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3); /* 使用渐变色 */
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保卡片宽度 */
}

.form-card {
  width: 100%;
  max-width: 300px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: left;
  margin: 0 auto; /* 居中 */
}

h2 {
  text-align: center;
  font-size: 19px;
  margin-bottom: 20px;
  color: #333;
  line-height: 2;
}


.el-form-item {
  margin-bottom: 20px;
}

.el-form-item label {
  width: 80px;
}

.el-input,
.el-date-picker,
.el-radio-group {
  width: 100%; 
}

.register-button {
  width: 100%;
  height: 40px;
  font-size: 17px;
  background: linear-gradient(to right, #b79b51, #103428);
  border-color: transparent;
  letter-spacing: 5px;
}

.register-button:hover {
  background: linear-gradient(to right, #ba9632, #0a3426);
}

.el-radio {
  margin-right: 0px; /* 调整单选按钮之间的间距 */
}
</style>
